<template>
  <div>
    <div>
      <div class="block" style="margin: 10px 0">
<!--        <el-button type="primary" @click="tiaozhuan">click</el-button>-->

        <el-date-picker style=" margin-right: 20px"
                        v-model="value_date_produce"
                        type="date"
                        value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-button type="danger" @click="produceExcelFile">生成excel</el-button>
      </div>

    </div>

    <div>
      <div class="block" style="margin: 10px 0">

        <el-date-picker style=" margin-right: 20px"
                        v-model="value_date"
                        type="date"
                        value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-button type="primary" @click="getExcelFile(value_date)">下载excel</el-button>
      </div>

    </div>

    <div class="block">


      <!--      <span class="demonstration">月</span>-->
      <el-date-picker
          v-model="value_month"
          type="month"
          value-format="yyyy-MM"
          placeholder="选择月">
      </el-date-picker>
      <el-button style="margin-left: 20px" type="success" @click="findExcelFiles">查询excel</el-button>
    </div>
    <el-table :data="tableData" stripe border style="margin: 5px">
      <el-table-column label="序号"
                       type="index"
                       :index="1">
      </el-table-column>
      <!--      <el-table-column prop="id" label="ID" width="200">-->
      <!--      </el-table-column>-->
      <el-table-column prop="rq" label="创建时间" width="200">
      </el-table-column>
      <el-table-column prop="fileName" label="文件名" width="300">
      </el-table-column>

      <el-table-column>
        <template slot-scope="scope">
          <el-button type="primary" style="margin: 0 5px" @click="getExcelFile2(scope.row.fileName)">下载<i
              class="el-icon-edit"></i></el-button>
          <el-button type="danger" style="margin: 0 5px" @click="delExcelFile(scope.row.fileName)">删除<i
              class="el-icon-remove"></i></el-button>
        </template>
      </el-table-column>
    </el-table>


  </div>

</template>

<script>
import * as echarts from 'echarts';
import service from "@/utils/request";
import ElementUI from "element-ui";
import {formatDateTime} from '@/utils/formatDateTime'

export default {
  data() {
    return {
      value_date_produce: formatDateTime(new Date(), 'yyyy-MM-dd'),
      value_date: formatDateTime(new Date(), 'yyyy-MM-dd'),
      // value_year: formatDateTime(new Date(), 'yyyy'),
      value_month: formatDateTime(new Date(), 'yyyy-MM'),
      tableData: []
      // interval: 1
    }

  },

  created() {
    this.load();
  },
  methods: {
    tiaozhuan(){
      this.$router.push('/zb')
    },
    load() {
      service.get("/zb/list", {
        params: {
          date: this.value_month
        }
      }).then(response => {
        this.tableData = response.data.data;

      })

    },
    findExcelFiles() {
      this.load()

    },


    downloadFile(res) {
      try {
        if (!res) {
          return;
        }
        console.log(res)
        //                            Content-Disposition
        const fileName = res.headers["content-disposition"].split("=")[1];
        // const blob = new Blob([res.data], {
        //   type: 'application/octet-stream'
        // });
        const blob = new Blob([res.data])
        const url = window.URL.createObjectURL(blob);
        const aLink = document.createElement("a");
        aLink.style.display = "none";
        aLink.href = url;
        aLink.setAttribute("download", decodeURI(fileName));
        document.body.appendChild(aLink);
        aLink.click();
        document.body.removeChild(aLink);
        window.URL.revokeObjectURL(url);
      } catch (e) {
        ElementUI.Message({
          // message: e.message,
          message: '下载失败！  ' + e.message,
          type: 'error'
        })
      }
    },
    getExcelFile(dateVal) {
      service({
        url: '/zb/zbdeprecated',
        method: 'get',
        params: {
          date: dateVal,
        },
        responseType: 'blob',
        headers: {
          //注意
          "Content-Type": "application/json; application/octet-stream",
          // "Content-Type": "application/json",
        },
      }).then(res => {
        // console.log(res);

        if (res.headers['content-type'] === 'application/json') {//出错了
          var fileReader = new FileReader()
          fileReader.readAsText(res.data)
          fileReader.onloadend = () => {
            var errstr = fileReader.result
            var errjson = JSON.parse(errstr)
            ElementUI.Message({
              message: errjson.message,
              type: 'error'
            })
          }

        } else if (res.headers['content-type'] === 'application/octet-stream') {
          // console.log('application/octet-stream')
          this.downloadFile(res);
        }

      }, error => {
        ElementUI.Message({
          message: error.message,
          type: 'error'
        })
      })
    },
    getExcelFile2(fileName) {
      service({
        url: '/zb',
        method: 'get',
        params: {
          fileName: fileName,
        },
        responseType: 'blob',

      }).then(res => {
        // console.log(res);

        if (res.headers['content-type'] === 'application/json') {//出错了
          var fileReader = new FileReader()
          fileReader.readAsText(res.data)
          fileReader.onloadend = () => {
            var errstr = fileReader.result
            var errjson = JSON.parse(errstr)
            ElementUI.Message({
              message: errjson.message,
              type: 'error'
            })
          }

        } else if (res.headers['content-type'] === 'application/octet-stream') {
          // console.log('application/octet-stream')
          this.downloadFile(res);
        }

      }, error => {
        ElementUI.Message({
          message: error.message,
          type: 'error'
        })
      })
    },
    produceExcelFile() {
      service({
        url: '/zb/producezb',
        method: 'get',
        params: {
          date: this.value_date_produce,
        },
        // responseType: 'blob',
        // headers: {
        //   //注意
        //   "Content-Type": "application/json; application/octet-stream",
        // },
      }).then(res => {
        if (res.data.code === 20000) {
          ElementUI.Message({
            message: res.data.data,
            type: 'success'
          })

        } else {
          ElementUI.Message({
            message: res.data.message,
            type: 'warning'
          })

        }

        // console.log(res);
        // this.downloadFile(res);
      }, error => {
        ElementUI.Message({
          message: error.message,
          type: 'error'
        })
      })

    },
    delExcelFile(fileName) {
      // console.log('fileName=' + encodeURIComponent( fileName))

      service.post('/zb/deleteExcelFile', 'fileName=' + encodeURIComponent(fileName)).then(
          res => {
            if (res.data.code === 20000) {
              ElementUI.Message({
                message: '删除成功',
                type: 'info'
              })
              this.load()

            } else {
              ElementUI.Message({
                message: res.data.message,
                type: 'warning'
              })

            }

            // console.log(res);
            // this.downloadFile(res);
          }, error => {
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      )

    }


    // download(id) {
    //   let url = "http://localhost:9090/file/" + id;
    //   service({
    //     url: url,
    //     method: "get",
    //     responseType: 'blob',
    //   }).then(res => {
    //
    //     this.downloadFile(res);
    //   })

    // window.open('http://localhost:9090/file/' + id)
    // service.get('/file/' + id, {
    //
    // }).then(response => {
    //       if (response.code == 20000) {
    //
    //       }
    //     },
    //     error => {
    //       ElementUI.Message({
    //         message: error.message,
    //         type: 'error'
    //       })
    //     }
    // );

    // },


  }

}


</script>

<style scoped>

</style>